<template>
  <!-- 未开通界面 -->
  <template v-if="notOpenedVue !== 1">
    <NotOpenedVue></NotOpenedVue>
  </template>
  <template v-else>
    <div class="layout">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="员工检索" name="first">
          <tab-pane v-if="activeName === 'first'" :index="0" />
        </el-tab-pane>
        <el-tab-pane label="客户检索" name="second">
          <tab-pane v-if="activeName === 'second'" :index="1" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  <!-- end未开通界面 -->
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import tabPane from './components/tabPane.vue'
  import NotOpenedVue from './components/NotOpened.vue'
  import { whetherOpen } from '@/api/employe/riskmonitoring/messagearchiving'
  // 显示未开通
  const notOpenedVue = ref(1)

  const activeName = ref('first')
  onMounted(() => {
    whetherOpen().then((data: any) => {
      notOpenedVue.value = data.is_open
    })
  })
</script>

<style lang="scss" scoped>
  .layout {
    background-color: #fff;
    border: 1px solid #eaeaea;
    padding: 16px;
    overflow: hidden
  }
  :deep(.el-tabs__item) {
    height: auto;
    line-height: normal;
    padding: 0 20px 16px;
  }
  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
    background-color: #eaeaea;
  }
</style>
